<template>
    <div id="chatBottom">
           <div class="bottom">
        <el-row :gutter="20">
            <el-col :span="4">
                <div class="grid-content bg-purple">
                <el-checkbox v-model="checked" @change="allChecked($event)"></el-checkbox></div>
            </el-col>

           <Chatcenter :all_arr = "all_arr"></Chatcenter>
         
            <el-col :span="5">
              <div class="grid-content bg-purple">
             <p class="bottom-p">总计，{{info.sum_list}}个记录，分为{{info.num_page}}页，每页{{info.num}}个记录</p>
              </div>
             
             </el-col>

             <CBottom :info = "info" @get_page = "getPage" @update = "updatePage"></CBottom>
     
        </el-row>
      </div>
    </div>
</template>

<script>
import Chatcenter from './Chatcenter'
import CBottom from './c-bottom'

export default {
    name:'chatBottom',
    data() {
        return {
          checked:false
        }
    },
    components:{
        Chatcenter,
        CBottom
    },
    props:{
      info:{
        type:[Array,Object,String]
      },
      all_arr:{
        type:[Array,Object,String]
      },
      isCheck:{
        type:[Array,Object]
      }
    },
    methods:{
      getPage(val){
        this.$emit('getPage',val)
      },
      //全选
      allChecked(event){
        this.checked = event
        if(event == true){
          this.$emit('is_all',this.checked)
        }else if(event == false){
          if(this.isCheck.checkNum == this.isCheck.num){
            this.$emit('is_all',this.checked)
          }
        }
        
      },
      updatePage(val){
        this.checked = false
        //console.log(val)
        this.$emit('is_all',this.checked)
      }
    },
    watch:{
      //深度监听
      isCheck:{
        handler(newVal){
          if(newVal.num == newVal.checkNum){
            this.checked = true
            this.$emit('is_all',this.checked)
          }else{
            this.checked = false
            this.$emit('is_all',this.checked)
          }
        },
        deep:true
      }
    }
}
</script>

<style lang="scss" scoped>
.bottom {
  background: #ffffff;
  border-bottom: 2px solid #62b3ff;
  height: 60px;
  .bottom-p{
    font-size: 12px;
    line-height: 40px;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.grid-content {
      text-align: center;
      padding: 10px 0;
}
</style>